<template>
	<view>
		<view class="moment-wrap">
			<view class="moment" v-for="(item,index) in dataList">
				<view class="avatar-nick-level-time">
					<view class="avatar">
						<image src="https://www.auok.ltd/background.jpg" mode="aspectFill"></image>
					</view>
					<view class="nick-level-time">
						<view class="nick-level">
							<view class="nick">阿萨的开发商的开发上</view>
							<view class="level">LV.13</view>
						</view>
						<view class="time">刚刚</view>
					</view>
				</view>
				<view class="content" @click="toDetail">
					君不见黄河之水天上来，奔流到海不复回。
					君不见高堂明镜悲白发，朝如青丝暮成雪。
					人生得意须尽欢，莫使金樽空对月。
					天生我材必有用，千金散尽还复来。
					烹羊宰牛且为乐，会须一饮三百杯。
					岑夫子，丹丘生，将进酒，杯莫停。
					与君歌一曲，请君为我倾耳听。
					钟鼓馔玉不足贵，但愿长醉不复醒。
					古来圣贤皆寂寞，惟有饮者留其名。
					陈王昔时宴平乐，斗酒十千恣欢谑。
					主人何为言少钱，径须沽取对君酌。
					五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
				</view>
				<!-- 如果有图片或者视频 -->
				<view class="media" v-if="true">
					<!-- 有视频没图片、有图片没视频 字段中需要标识类型-->
					<view class="show-video" v-if="true">
						<video src="https://www.auok.ltd/999.mp4"></video>
					</view>
					<!-- 图片一张 、 两张 、大于三张 -->
					<view v-if="true && item.imgList">
						<view class="show-img1" v-if="item.imgList.length === 1">
							<image v-for="(img,imgIndex) in item.imgList" :src="img" mode="aspectFill"
								@click="preview(index,imgIndex)"></image>
						</view>
						<view class="show-img2" v-if="item.imgList.length === 2">
							<image v-for="(img,imgIndex) in item.imgList" :src="img" mode="aspectFill"
								@click="preview(index,imgIndex)"></image>
						</view>
						<view class="show-img3" v-if="item.imgList.length >= 3">
							<image v-for="(img,imgIndex) in item.imgList" :src="img" mode="aspectFill"
								@click="preview(index,imgIndex)"></image>
						</view>
					</view>
				</view>
				<view class="tool">
					<!-- 	<view @click="share">
						<u-icon name="share" size="38"></u-icon>分享
					</view> -->
					<view @click="comment">
						<u-icon name="chat" size="38"></u-icon>评论
					</view>
					<view @click="like">
						<u-icon name="thumb-up" size="38"></u-icon>赞
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "showMoment",
		props: {
			dataList: {
				type: Array,
				default () {
					return []
				}
			},
			page: {
				type: String,
				default: ''
			},
			config: {
				type: Object,
				default () {
					return {
						showTool: true,

					}
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			preview(index, imgIndex) {
				uni.previewImage({
					urls: this.dataList[index].imgList,
					current: imgIndex
				})
			},
			toDetail(dynamicId) {
				uni.navigateTo({
					url: `/pages/dynamicDetail/dynamicDetail?dynamicId=${dynamicId}`
				})
			},
			share() {

			},
			comment() {

			},
			like() {

			}
		}
	}
</script>

<style lang="less" scoped>
	.media {
		.show-video {

			// border: 1px solid;
			video {
				width: 100%;
				border-radius: 20rpx;
			}
		}

		.show-img1 {
			image {
				width: 100%;
				border-radius: 20rpx;
			}
		}

		.show-img2 {
			image {
				width: 48%;
				margin: 1%;
				max-height: 320rpx;
				border-radius: 20rpx;
			}
		}

		.show-img3 {
			image {
				width: 31%;
				margin: 1%;
				border-radius: 20rpx;
				max-height: 210rpx;

			}
		}
	}

	.moment-wrap {
		// padding: 30rpx;
	}

	.moment {
		background: #FFFFFF;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.tool {
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #999;
		padding-top: 20rpx;

		.u-icon {
			margin-right: 10rpx;
			color: #333;
		}
	}

	.content {
		font-size: 32rpx;
		margin: 25rpx 0;
		color: #333;
		line-height: 1.4;
	}

	.avatar-nick-level-time {
		display: flex;
		align-items: center;

		.nick-level-time {
			.nick-level {
				display: flex;
				align-items: center;

				.nick {
					margin-right: 15rpx;
					color: #333;
					font-size: 32rpx;
				}

				.level {
					font-size: 24rpx;
					color: #FFFFFF;
					background-color: #ff4273;
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
					transform: scale(.6);
				}
			}

			.time {
				color: rgba(127, 127, 127.3);
				margin-top: 15rpx;
				font-size: 26rpx;

			}
		}

		.avatar {
			margin-right: 20rpx;

			image {
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
			}

		}
	}
</style>
